<template>
  <el-dialog
    v-model="dialogVisible"
    title="执行预案"
    width="1000px"
    :close-on-click-modal="false"
    :before-close="handleBeforeClose"
  >
    <div class="execute-plan">
      <!-- 预案信息 -->
      <el-card shadow="never" class="plan-info-card">
        <template #header>
          <div class="card-header">
            <h3>预案信息</h3>
            <div class="plan-status">
              <el-tag :type="getStatusTagType(planData.status)">
                {{ getStatusText(planData.status) }}
              </el-tag>
              <el-tag :type="getPriorityTagType(planData.priority)" style="margin-left: 10px">
                {{ getPriorityText(planData.priority) }}
              </el-tag>
            </div>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>预案名称：</label>
              <span>{{ planData.planName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>预案类型：</label>
              <el-tag :type="getTypeTagType(planData.planType)" size="small">
                {{ getTypeText(planData.planType) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>版本号：</label>
              <span>{{ planData.version }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 执行控制 -->
      <el-card shadow="never" class="control-card">
        <template #header>
          <div class="card-header">
            <h3>执行控制</h3>
            <div class="execution-status">
              <el-tag :type="getExecutionStatusTagType(executionStatus)" size="large">
                {{ getExecutionStatusText(executionStatus) }}
              </el-tag>
            </div>
          </div>
        </template>
        
        <div class="control-panel">
          <div class="control-buttons">
            <el-button
              type="success"
              size="large"
              @click="startExecution"
              :disabled="executionStatus !== 'ready'"
              :loading="executionStatus === 'starting'"
            >
              <el-icon><VideoPlay /></el-icon>
              开始执行
            </el-button>
            
            <el-button
              type="warning"
              size="large"
              @click="pauseExecution"
              :disabled="executionStatus !== 'running'"
            >
              <el-icon><VideoPause /></el-icon>
              暂停执行
            </el-button>
            
            <el-button
              type="info"
              size="large"
              @click="resumeExecution"
              :disabled="executionStatus !== 'paused'"
            >
              <el-icon><VideoPlay /></el-icon>
              继续执行
            </el-button>
            
            <el-button
              type="danger"
              size="large"
              @click="stopExecution"
              :disabled="!['running', 'paused'].includes(executionStatus)"
            >
              <el-icon><VideoCamera /></el-icon>
              停止执行
            </el-button>
          </div>
          
          <div class="execution-info">
            <div class="info-row">
              <span class="label">执行人：</span>
              <span class="value">{{ currentUser }}</span>
            </div>
            <div class="info-row">
              <span class="label">开始时间：</span>
              <span class="value">{{ executionStartTime || '-' }}</span>
            </div>
            <div class="info-row">
              <span class="label">已执行时间：</span>
              <span class="value">{{ formatDuration(executionDuration) }}</span>
            </div>
            <div class="info-row">
              <span class="label">预计剩余时间：</span>
              <span class="value">{{ formatDuration(estimatedRemainingTime) }}</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 执行进度 -->
      <el-card shadow="never" class="progress-card">
        <template #header>
          <h3>执行进度</h3>
        </template>
        
        <div class="progress-overview">
          <el-progress
            :percentage="overallProgress"
            :status="getProgressStatus()"
            :stroke-width="20"
            text-inside
          />
          <div class="progress-stats">
            <div class="stat-item">
              <span class="stat-label">总步骤：</span>
              <span class="stat-value">{{ totalSteps }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">已完成：</span>
              <span class="stat-value">{{ completedSteps }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">进行中：</span>
              <span class="stat-value">{{ runningSteps }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">待执行：</span>
              <span class="stat-value">{{ pendingSteps }}</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 执行步骤 -->
      <el-card shadow="never" class="steps-card">
        <template #header>
          <h3>执行步骤</h3>
        </template>
        
        <div class="steps-container">
          <el-timeline>
            <el-timeline-item
              v-for="(step, index) in executionSteps"
              :key="index"
              :timestamp="`步骤 ${index + 1}`"
              :type="getStepTimelineType(step.status)"
              :icon="getStepIcon(step.status)"
              placement="top"
            >
              <el-card shadow="hover" class="step-card" :class="getStepCardClass(step.status)">
                <div class="step-header">
                  <div class="step-title">
                    <h4>{{ step.name }}</h4>
                    <el-tag :type="getStepStatusTagType(step.status)" size="small">
                      {{ getStepStatusText(step.status) }}
                    </el-tag>
                  </div>
                  <div class="step-meta">
                    <span class="responsible">责任人：{{ getResponsibleText(step.responsible) }}</span>
                    <span class="time">预计耗时：{{ step.estimatedTime }} 分钟</span>
                  </div>
                </div>
                
                <div class="step-content">
                  <p><strong>执行内容：</strong>{{ step.description }}</p>
                  <p v-if="step.notes"><strong>注意事项：</strong>{{ step.notes }}</p>
                </div>
                
                <div v-if="step.status === 'running'" class="step-progress">
                  <el-progress :percentage="step.progress" :show-text="false" />
                  <span class="progress-text">{{ step.progress }}%</span>
                </div>
                
                <div v-if="step.result" class="step-result">
                  <div class="result-header">
                    <strong>执行结果：</strong>
                    <el-tag :type="step.result.success ? 'success' : 'danger'" size="small">
                      {{ step.result.success ? '成功' : '失败' }}
                    </el-tag>
                  </div>
                  <p class="result-message">{{ step.result.message }}</p>
                  <div v-if="step.result.startTime" class="result-time">
                    <span>开始时间：{{ formatDateTime(step.result.startTime) }}</span>
                    <span v-if="step.result.endTime" style="margin-left: 20px">
                      结束时间：{{ formatDateTime(step.result.endTime) }}
                    </span>
                    <span v-if="step.result.duration" style="margin-left: 20px">
                      耗时：{{ step.result.duration }} 分钟
                    </span>
                  </div>
                </div>
                
                <div v-if="step.status === 'running' || step.status === 'pending'" class="step-actions">
                  <el-button
                    v-if="step.type === 'manual'"
                    type="primary"
                    size="small"
                    @click="completeStep(index)"
                    :disabled="step.status !== 'running'"
                  >
                    完成步骤
                  </el-button>
                  <el-button
                    type="warning"
                    size="small"
                    @click="skipStep(index)"
                    :disabled="step.status !== 'pending'"
                  >
                    跳过步骤
                  </el-button>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>

      <!-- 执行日志 -->
      <el-card shadow="never" class="log-card">
        <template #header>
          <div class="card-header">
            <h3>执行日志</h3>
            <div class="log-actions">
              <el-button type="primary" size="small" @click="refreshLogs">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
              <el-button type="info" size="small" @click="exportLogs">
                <el-icon><Download /></el-icon>
                导出日志
              </el-button>
            </div>
          </div>
        </template>
        
        <div class="log-container">
          <div
            v-for="(log, index) in executionLogs"
            :key="index"
            class="log-item"
            :class="getLogItemClass(log.level)"
          >
            <div class="log-time">{{ formatDateTime(log.timestamp) }}</div>
            <div class="log-level">
              <el-tag :type="getLogLevelTagType(log.level)" size="small">
                {{ log.level.toUpperCase() }}
              </el-tag>
            </div>
            <div class="log-message">{{ log.message }}</div>
          </div>
          
          <div v-if="executionLogs.length === 0" class="empty-logs">
            <el-empty description="暂无执行日志" />
          </div>
        </div>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" :disabled="executionStatus === 'running'">
          {{ executionStatus === 'running' ? '执行中...' : '关闭' }}
        </el-button>
        <el-button type="info" @click="handleExportReport">
          <el-icon><Document /></el-icon>
          导出报告
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  VideoPlay,
  VideoPause,
  VideoCamera,
  Refresh,
  Download,
  Document,
  Check,
  Close,
  Clock,
  Warning
} from '@element-plus/icons-vue'

interface Props {
  visible: boolean
  planData: any
}

interface Emits {
  (e: 'update:visible', visible: boolean): void
  (e: 'success'): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  planData: () => ({})
})

const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 执行状态
const executionStatus = ref('ready') // ready, starting, running, paused, completed, failed, stopped
const currentUser = ref('张三')
const executionStartTime = ref('')
const executionDuration = ref(0)
const estimatedRemainingTime = ref(0)

// 执行步骤
const executionSteps = ref([])
const executionLogs = ref([])

// 定时器
let executionTimer: NodeJS.Timeout | null = null
let logTimer: NodeJS.Timeout | null = null

// 计算属性
const totalSteps = computed(() => executionSteps.value.length)
const completedSteps = computed(() => executionSteps.value.filter(step => step.status === 'completed').length)
const runningSteps = computed(() => executionSteps.value.filter(step => step.status === 'running').length)
const pendingSteps = computed(() => executionSteps.value.filter(step => step.status === 'pending').length)
const overallProgress = computed(() => {
  if (totalSteps.value === 0) return 0
  return Math.round((completedSteps.value / totalSteps.value) * 100)
})

// 初始化执行步骤
const initializeSteps = () => {
  if (props.planData.executionSteps) {
    executionSteps.value = props.planData.executionSteps.map((step, index) => ({
      ...step,
      status: 'pending',
      progress: 0,
      result: null
    }))
  }
}

// 开始执行
const startExecution = async () => {
  try {
    await ElMessageBox.confirm('确认开始执行预案？', '确认执行', {
      type: 'warning'
    })
    
    executionStatus.value = 'starting'
    executionStartTime.value = new Date().toLocaleString('zh-CN')
    
    // 模拟启动延迟
    setTimeout(() => {
      executionStatus.value = 'running'
      executeNextStep()
      startTimers()
      addLog('info', '预案执行开始')
    }, 2000)
    
  } catch {
    // 用户取消
  }
}

// 暂停执行
const pauseExecution = () => {
  executionStatus.value = 'paused'
  stopTimers()
  addLog('warning', '预案执行已暂停')
}

// 继续执行
const resumeExecution = () => {
  executionStatus.value = 'running'
  startTimers()
  addLog('info', '预案执行已恢复')
}

// 停止执行
const stopExecution = async () => {
  try {
    await ElMessageBox.confirm('确认停止执行预案？', '确认停止', {
      type: 'warning'
    })
    
    executionStatus.value = 'stopped'
    stopTimers()
    addLog('warning', '预案执行已停止')
    
  } catch {
    // 用户取消
  }
}

// 执行下一步
const executeNextStep = () => {
  const nextStep = executionSteps.value.find(step => step.status === 'pending')
  if (!nextStep) {
    // 所有步骤完成
    executionStatus.value = 'completed'
    stopTimers()
    addLog('success', '预案执行完成')
    ElMessage.success('预案执行完成')
    return
  }
  
  nextStep.status = 'running'
  nextStep.progress = 0
  nextStep.result = {
    startTime: new Date().toISOString()
  }
  
  addLog('info', `开始执行步骤：${nextStep.name}`)
  
  // 模拟步骤执行
  simulateStepExecution(nextStep)
}

// 模拟步骤执行
const simulateStepExecution = (step) => {
  const duration = step.estimatedTime * 60 * 1000 // 转换为毫秒
  const interval = duration / 100 // 每1%的时间间隔
  
  const progressTimer = setInterval(() => {
    if (executionStatus.value !== 'running') {
      clearInterval(progressTimer)
      return
    }
    
    step.progress += 1
    
    if (step.progress >= 100) {
      clearInterval(progressTimer)
      completeStepAutomatically(step)
    }
  }, interval)
}

// 自动完成步骤
const completeStepAutomatically = (step) => {
  if (step.type === 'manual') {
    // 人工步骤需要手动确认
    addLog('warning', `步骤 "${step.name}" 需要人工确认完成`)
    return
  }
  
  // 自动步骤直接完成
  step.status = 'completed'
  step.result = {
    ...step.result,
    endTime: new Date().toISOString(),
    duration: step.estimatedTime,
    success: Math.random() > 0.1, // 90%成功率
    message: Math.random() > 0.1 ? '步骤执行成功' : '步骤执行失败'
  }
  
  addLog(step.result.success ? 'success' : 'error', 
    `步骤 "${step.name}" ${step.result.success ? '执行成功' : '执行失败'}`)
  
  if (step.result.success) {
    // 继续下一步
    setTimeout(() => {
      if (executionStatus.value === 'running') {
        executeNextStep()
      }
    }, 1000)
  } else {
    // 执行失败，暂停执行
    executionStatus.value = 'failed'
    stopTimers()
    addLog('error', '预案执行失败')
    ElMessage.error('预案执行失败')
  }
}

// 手动完成步骤
const completeStep = (stepIndex) => {
  const step = executionSteps.value[stepIndex]
  step.status = 'completed'
  step.progress = 100
  step.result = {
    ...step.result,
    endTime: new Date().toISOString(),
    duration: Math.ceil((new Date().getTime() - new Date(step.result.startTime).getTime()) / 60000),
    success: true,
    message: '步骤手动完成'
  }
  
  addLog('success', `步骤 "${step.name}" 手动完成`)
  
  // 继续下一步
  setTimeout(() => {
    if (executionStatus.value === 'running') {
      executeNextStep()
    }
  }, 1000)
}

// 跳过步骤
const skipStep = (stepIndex) => {
  const step = executionSteps.value[stepIndex]
  step.status = 'completed'
  step.progress = 100
  step.result = {
    startTime: new Date().toISOString(),
    endTime: new Date().toISOString(),
    duration: 0,
    success: true,
    message: '步骤已跳过'
  }
  
  addLog('warning', `步骤 "${step.name}" 已跳过`)
}

// 启动定时器
const startTimers = () => {
  // 执行时间计时器
  executionTimer = setInterval(() => {
    executionDuration.value += 1
    updateEstimatedRemainingTime()
  }, 60000) // 每分钟更新一次
  
  // 日志定时器（模拟实时日志）
  logTimer = setInterval(() => {
    if (Math.random() > 0.7) {
      const messages = [
        '系统状态正常',
        '监控数据更新',
        '设备响应正常',
        '网络连接稳定'
      ]
      addLog('info', messages[Math.floor(Math.random() * messages.length)])
    }
  }, 30000) // 每30秒可能添加一条日志
}

// 停止定时器
const stopTimers = () => {
  if (executionTimer) {
    clearInterval(executionTimer)
    executionTimer = null
  }
  if (logTimer) {
    clearInterval(logTimer)
    logTimer = null
  }
}

// 更新预计剩余时间
const updateEstimatedRemainingTime = () => {
  const remainingSteps = executionSteps.value.filter(step => step.status === 'pending')
  estimatedRemainingTime.value = remainingSteps.reduce((total, step) => total + step.estimatedTime, 0)
}

// 添加日志
const addLog = (level, message) => {
  executionLogs.value.unshift({
    timestamp: new Date().toISOString(),
    level,
    message
  })
  
  // 限制日志数量
  if (executionLogs.value.length > 100) {
    executionLogs.value = executionLogs.value.slice(0, 100)
  }
}

// 刷新日志
const refreshLogs = () => {
  addLog('info', '日志已刷新')
}

// 导出日志
const exportLogs = () => {
  ElMessage.success('日志导出功能开发中...')
}

// 导出报告
const handleExportReport = () => {
  ElMessage.success('执行报告导出功能开发中...')
}

// 格式化持续时间
const formatDuration = (minutes) => {
  if (minutes < 60) {
    return `${minutes} 分钟`
  } else {
    const hours = Math.floor(minutes / 60)
    const mins = minutes % 60
    return `${hours} 小时 ${mins} 分钟`
  }
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 获取各种状态和样式的辅助函数
const getStatusTagType = (status) => {
  const typeMap = {
    'draft': 'info',
    'reviewing': 'warning',
    'active': 'success',
    'obsolete': 'danger'
  }
  return typeMap[status] || 'info'
}

const getStatusText = (status) => {
  const textMap = {
    'draft': '草稿',
    'reviewing': '审核中',
    'active': '生效',
    'obsolete': '已废止'
  }
  return textMap[status] || status
}

const getPriorityTagType = (priority) => {
  const typeMap = {
    'low': 'info',
    'medium': 'warning',
    'high': 'danger'
  }
  return typeMap[priority] || 'info'
}

const getPriorityText = (priority) => {
  const textMap = {
    'low': '低',
    'medium': '中',
    'high': '高'
  }
  return textMap[priority] || priority
}

const getTypeTagType = (type) => {
  const typeMap = {
    'flood_control': 'primary',
    'drought_control': 'warning',
    'emergency': 'danger',
    'maintenance': 'info',
    'safety': 'success'
  }
  return typeMap[type] || 'info'
}

const getTypeText = (type) => {
  const textMap = {
    'flood_control': '防洪预案',
    'drought_control': '抗旱预案',
    'emergency': '应急预案',
    'maintenance': '维护预案',
    'safety': '安全预案'
  }
  return textMap[type] || type
}

const getExecutionStatusTagType = (status) => {
  const typeMap = {
    'ready': 'info',
    'starting': 'warning',
    'running': 'primary',
    'paused': 'warning',
    'completed': 'success',
    'failed': 'danger',
    'stopped': 'info'
  }
  return typeMap[status] || 'info'
}

const getExecutionStatusText = (status) => {
  const textMap = {
    'ready': '准备就绪',
    'starting': '启动中',
    'running': '执行中',
    'paused': '已暂停',
    'completed': '已完成',
    'failed': '执行失败',
    'stopped': '已停止'
  }
  return textMap[status] || status
}

const getProgressStatus = () => {
  if (executionStatus.value === 'completed') return 'success'
  if (executionStatus.value === 'failed') return 'exception'
  return undefined
}

const getStepTimelineType = (status) => {
  const typeMap = {
    'pending': 'info',
    'running': 'primary',
    'completed': 'success',
    'failed': 'danger',
    'skipped': 'warning'
  }
  return typeMap[status] || 'info'
}

const getStepIcon = (status) => {
  const iconMap = {
    'pending': Clock,
    'running': VideoPlay,
    'completed': Check,
    'failed': Close,
    'skipped': Warning
  }
  return iconMap[status] || Clock
}

const getStepCardClass = (status) => {
  return `step-${status}`
}

const getStepStatusTagType = (status) => {
  const typeMap = {
    'pending': 'info',
    'running': 'primary',
    'completed': 'success',
    'failed': 'danger',
    'skipped': 'warning'
  }
  return typeMap[status] || 'info'
}

const getStepStatusText = (status) => {
  const textMap = {
    'pending': '待执行',
    'running': '执行中',
    'completed': '已完成',
    'failed': '执行失败',
    'skipped': '已跳过'
  }
  return textMap[status] || status
}

const getResponsibleText = (responsible) => {
  const textMap = {
    'duty_officer': '值班员',
    'technician': '技术员',
    'supervisor': '主管',
    'admin': '系统管理员'
  }
  return textMap[responsible] || responsible
}

const getLogItemClass = (level) => {
  return `log-${level}`
}

const getLogLevelTagType = (level) => {
  const typeMap = {
    'info': 'primary',
    'success': 'success',
    'warning': 'warning',
    'error': 'danger'
  }
  return typeMap[level] || 'info'
}

// 关闭前确认
const handleBeforeClose = (done) => {
  if (executionStatus.value === 'running') {
    ElMessageBox.confirm('预案正在执行中，确认关闭？', '确认关闭', {
      type: 'warning'
    }).then(() => {
      stopTimers()
      done()
    }).catch(() => {
      // 用户取消
    })
  } else {
    done()
  }
}

// 关闭对话框
const handleClose = () => {
  if (executionStatus.value !== 'running') {
    dialogVisible.value = false
  }
}

// 组件挂载和卸载
onMounted(() => {
  initializeSteps()
})

onUnmounted(() => {
  stopTimers()
})

// 监听对话框显示状态
watch(dialogVisible, (visible) => {
  if (visible) {
    initializeSteps()
    executionStatus.value = 'ready'
    executionStartTime.value = ''
    executionDuration.value = 0
    estimatedRemainingTime.value = 0
    executionLogs.value = []
  } else {
    stopTimers()
  }
})
</script>

<style scoped>
.execute-plan {
  max-height: 70vh;
  overflow-y: auto;
}

.plan-info-card,
.control-card,
.progress-card,
.steps-card,
.log-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-status,
.execution-status {
  display: flex;
  align-items: center;
}

.info-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.info-item label {
  font-weight: bold;
  color: #666;
  min-width: 100px;
  margin-right: 10px;
}

.control-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.control-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.execution-info {
  min-width: 300px;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.info-row .label {
  font-weight: bold;
  color: #666;
  min-width: 100px;
}

.info-row .value {
  color: #333;
}

.progress-overview {
  margin-bottom: 20px;
}

.progress-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  color: #666;
  font-size: 12px;
  margin-bottom: 5px;
}

.stat-value {
  display: block;
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

.steps-container {
  max-height: 400px;
  overflow-y: auto;
}

.step-card {
  margin-bottom: 10px;
}

.step-card.step-running {
  border-left: 4px solid #409eff;
}

.step-card.step-completed {
  border-left: 4px solid #67c23a;
}

.step-card.step-failed {
  border-left: 4px solid #f56c6c;
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-title h4 {
  margin: 0;
  color: #333;
}

.step-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  color: #666;
}

.step-content {
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

.step-content p {
  margin: 5px 0;
}

.step-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.progress-text {
  font-size: 12px;
  color: #666;
}

.step-result {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.result-message {
  margin: 5px 0;
  color: #333;
}

.result-time {
  font-size: 12px;
  color: #666;
}

.step-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.log-container {
  max-height: 300px;
  overflow-y: auto;
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 10px;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.log-item:last-child {
  border-bottom: none;
}

.log-time {
  font-size: 12px;
  color: #666;
  min-width: 150px;
}

.log-level {
  min-width: 60px;
}

.log-message {
  flex: 1;
  color: #333;
}

.log-item.log-error {
  background-color: #fef0f0;
}

.log-item.log-warning {
  background-color: #fdf6ec;
}

.log-item.log-success {
  background-color: #f0f9ff;
}

.empty-logs {
  text-align: center;
  padding: 40px 0;
}

.dialog-footer {
  text-align: right;
}

.log-actions {
  display: flex;
  gap: 10px;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-timeline-item__timestamp) {
  font-weight: bold;
  color: #409eff;
}

:deep(.el-progress-bar__outer) {
  background-color: #f0f2f5;
}
</style>